<template>
    <div class="container" style="width:99%;margin-top:-25px;">
	<!-- 查询条件 -->
    <div class="query-box">
        <el-form :model="queryBox" status-icon ref="queryBox">
          <el-row>
            <el-col :span="4">
               <el-form-item label="" prop="code">
                <el-input v-model="queryBox.code" placeholder="分中心代码">
                    <template slot="prepend">分中心代码</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item label="" prop="headmaster">
                <el-input v-model="queryBox.headmaster" placeholder="校长姓名">
                    <template slot="prepend">校长姓名</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item label="" prop="phone">
                <el-input v-model="queryBox.phone" placeholder="手机号码">
                    <template slot="prepend">手机号码</template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
               <!-- <el-form-item label="" prop="manager">
                <el-input v-model="queryBox.signRep" placeholder="大区经理">
                    <template slot="prepend">大区经理</template>
                </el-input>
              </el-form-item> -->
              <div class="depart-box">
                   <div class="slect-title">大区经理</div>
                    <el-autocomplete
                      v-model="queryBox.signRep"
                      :fetch-suggestions="querySearchAsync2"
                      placeholder="请输入内容"
                      @select="handleSelect2"
                      clearable
                    ></el-autocomplete>
              </div> 
            </el-col>
          </el-row>
          <el-row>
           <el-col :span="10">
               <div class="depart-box">
                   <div class="slect-title">分中心名称</div>
                    <el-autocomplete
                      v-model="queryBox.name"
                      :fetch-suggestions="querySearchAsync"
                      placeholder="请输入内容"
                      @select="handleSelect"
                      clearable
                    ></el-autocomplete>
                 </div> 
            </el-col>
          </el-row>
        </el-form>
        <div class="from-btns">
            <kt-button :label="$t('action.reset')" perms="true" type="primary" @click="reset('queryBox')"/>
            <kt-button :label="$t('action.search')" perms="true" type="primary" @click="subcentersearch"/>
        </div>
    </div>
  <!-- 新增分中心按钮-->
  <div class="add-btns">
    <kt-button :label="$t('action.newaddsubcener')" perms="customerownership:proportioning:add" type="primary" @click="newaddsubcener"/>
  </div>
	<!--表格内容栏-->
	<!-- <CrmTable class="table-width" @findPage='findPage' @ProportioningPop='ProportioningPop'
  permsProprt='customerownership:proportioning:proportioning' :loading='loading'
  Proportioning showBatchDelete :data="pageResult" :columns="columns">
	</CrmTable> -->
  <CrmTable class="table-width" @findPage='findPage' @ProportioningPop='ProportioningPop'
  permsProprt='customerownership:proportioning:proportioning' :loading='loading'
  showBatchDelete :data="pageResult" :columns="columns">
	</CrmTable>
  
	<!--新增分中心界面-->
	<el-dialog :title="operation?'新增分中心':''" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form :model="newaddcenter" label-width="80px"  ref="newaddcenter" :size="size"
			label-position="right">
      <el-row>
        <el-col :span="5">
          <span style="display:inline-block;margin-top:7%">分中心编码:</span>
        </el-col>
        <el-col :span="19">
          <el-input v-model="branchCenterCode" placeholder="请输入分中心编码" auto-complete="off"></el-input>
        </el-col>
      </el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="addbrCustomer" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
  <!-- 配比弹窗 -->
  	<el-dialog :title="ProportioningData.name" width="30%" :visible.sync="ProportioningdialogVisible" :close-on-click-modal="false">
		<el-form :model="ProportioningData" label-width="80px"  ref="newaddcenter" :size="size"
			label-position="right">
      <el-row>
        <el-col :span='13'>
          <el-row>
            <el-col :span="13">
              <span style="display:inline-block;margin-top:7%">录播课分成比例</span>
            </el-col>
            <el-col :span="11">
              <el-select v-model="luboClassProportion" filterable clearable ref="luboselect" @change="change1">
                  <el-option
                      v-for="item in options"
                      :key="item.lable"
                      :label="item.value"
                      :value="item.label">
                  </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span='11'>
          <el-row>
            <el-col :span="9">
              <span style="display:inline-block;margin-top:10%">自定义</span>
            </el-col>
            <el-col :span="13">
               <el-input  @focus="focus1" @blur='blur1' v-model="ownluboClassProportion" placeholder="" auto-complete="off"></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-top:5%">
        <el-col :span='13'>
          <el-row>
            <el-col :span="13">
              <span style="display:inline-block;margin-top:7%">学酷分成比例</span>
            </el-col>
            <el-col :span="11">
              <el-select v-model="xuekuClassProportion" filterable clearable  ref="xuekuselect" @change="change2">
                  <el-option
                      v-for="item in options"
                      :key="item.lable"
                      :label="item.value"
                      :value="item.label">
                  </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span='11'>
          <el-row>
            <el-col :span="9">
              <span style="display:inline-block;margin-top:10%">自定义</span>
            </el-col>
            <el-col :span="13">
               <el-input @focus="focus2" @blur='blur2' v-model="ownxuekuClassProportion" placeholder="" auto-complete="off"></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-top:5%">
        <el-col :span='13'>
          <el-row>
            <el-col :span="13">
              <span style="display:inline-block;margin-top:7%">课糖分成比例</span>
            </el-col>
            <el-col :span="11">
              <el-select v-model="ketangClassProportion" filterable clearable ref="ketangselect" @change="change3">
                  <el-option
                      v-for="item in options"
                      :key="item.lable"
                      :label="item.value"
                      :value="item.label">
                  </el-option>
              </el-select> 
            </el-col>
          </el-row>
        </el-col>
        <el-col :span='11'>
          <el-row>
            <el-col :span="9">
              <span style="display:inline-block;margin-top:10%">自定义</span>
            </el-col>
            <el-col :span="13">
               <el-input @focus="focus3" @blur='blur3' v-model="ownketangClassProportion" placeholder="" auto-complete="off"></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="ProportioningdialogVisible = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="ProportioningDataForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import axios from 'axios'
export default {
  name: "Proportioning",
  components: {
    CrmTable,
    KtButton
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      newaddcenter:'',
      ownketangClassProportion:'',
      // 查询
      queryBox:{
        code:'',
        name:'',
        headmaster:'',
        phone:'',
        signRep:''
      },
      // 分成配比弹窗数据
      branchCenterCode:'',
      branchCenterId:'',
      id:'',
      ketangClassProportion:'',
      luboClassProportion:'',
      orderNum:'',
      provideNum:'',
      xuekuClassProportion:'',
      ownluboClassProportion:'',
      ownxuekuClassProportion:'',
      options:[
          {
            value:'1:9',
            label:'1:9'
          },
          {
            value:'2:8',
            label:'2:8'
          },
          {
            value:'3:7',
            label:'3:7'
          },
          {
            value:'4:6',
            label:'4:6'
          },
          {
            value:'5:5',
            label:'5:5'
          },
          {
            value:'6:4',
            label:'6:4'
          },
          {
            value:'7:3',
            label:'7:3'
          },
          {
            value:'8:2',
            label:'8:2'
          },
          {
            value:'9:1',
            label:'9:1'
          },

        ],
      columns: [
        { type:'index', label: "序号", minWidth: 50 },
        { prop: "code", label: "分中心代码", minWidth: 80 },
        { prop: "name", label: "分中心名称", minWidth: 80 },
        { prop: "headmaster", label: "校长名称", minWidth: 120 },
        { prop: "phone", label: "手机号码", minWidth: 100 },
        { prop: "provideNum", label: "提供资源数", minWidth: 100 },
        { prop: "orderNum", label: "成单数", minWidth: 100 },
        { prop: "resourceRate", label: "资源良品率", minWidth: 100 },
        // { prop: "luboClassProportion", label: "录播课分成比例", minWidth: 110 },
        // { prop: "xuekuClassProportion", label: "学酷分成比例", minWidth: 100 },
        // { prop: "ketangClassProportion", label: "课糖分成比例", minWidth: 100 },
        { prop: "devidedMoney", label: "分成金额", minWidth: 70 },
        { prop: "signRep", label: "所属大区经理", minWidth: 100 }
      ],
      pageRequest: { pageNum: 1, pageSize: 8 },
      pageResult:{
        content:[]
      },
      // 配比
      ProportioningData:[],
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      ProportioningdialogVisible:false,
      editLoading: false,
      dataFormRules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      },
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      loading : false
    };
  },
  methods: {
    // 加载用户角色信息
    findUserRoles: function() {
      this.$api.role.findAll().then(res => {
        // 加载角色集合
        this.roles = res.data;
      });
    },
    change1(){
      this.ownluboClassProportion=''
    },
    change2(){
      this.ownxuekuClassProportion=''
    },
    change3(){
      this.ownketangClassProportion=''
    },
    focus1(){
      this.$refs.luboselect.disabled=true
      this.luboClassProportion=''
    },
    blur1(){
      this.$refs.luboselect.disabled=false
    },
    focus2(){
      this.$refs.xuekuselect.disabled=true
      this.xuekuClassProportion=''
    },
    blur2(){
      this.$refs.xuekuselect.disabled=false
    },
    focus3(){
      this.$refs.ketangselect.disabled=true
      this.ketangClassProportion=''
    },
    blur3(){
      this.$refs.ketangselect.disabled=false
    },
    // 重置
    reset(queryBox){      
      this.$refs.queryBox.resetFields(); 
      this.queryBox.name=''  
      this.queryBox.signRep=''
      this.pageRequest.pageNum = 1;
      this.findPage(null)
    },
    // 显示新增界面
    newaddsubcener: function() {
      this.dialogVisible = true;
      this.operation = true;
      this.dataForm = {
        id: 0,
      };
    }, 
    // 菜单树选中
    deptTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.id;
      this.dataForm.deptName = data.name;
    },
    // 菜单树选中
    handleOptionClick() {},
    // 获取列表
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
    
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.user.branchCenterDividedqueryList(this.queryBox)
        .then(res => {
          let content = {'content':res.bCDicidedInfoList,'totalSize':res.total};
          this.pageResult=content;
          this.loading = false
        })
        .then(data != null ? data.callback : "");
    },
    // 查询
    subcentersearch(){
      this.loading = true;
      this.findPage(null)
    },
    // 配比弹窗
    ProportioningPop(params){
      this.ProportioningData = Object.assign({}, params.row);
      this.ProportioningdialogVisible = true;
      this.operation = true;
      this.branchCenterId=params.row.branchCenterId
      this.id=params.row.id
      this.orderNum=params.row.orderNum
      this.provideNum=params.row.provideNum
    },
    ProportioningDataForm(){
      if(this.ownluboClassProportion!=''){
        this.luboClassProportion=this.ownluboClassProportion
      }
      this.$api.user.setDividedInfo({
          branchCenterId:this.branchCenterId,
          ketangClassProportion:this.ketangClassProportion,
          luboClassProportion:this.luboClassProportion,
          xuekuClassProportion:this.xuekuClassProportion
        }).then(res=>{
          if(res.result==1){
            this.$message({ message: res.msg, type: "success" });
            this.ProportioningdialogVisible=false
            this.ketangClassProportion=''
            this.luboClassProportion=''
            this.xuekuClassProportion=''
            this.ownluboClassProportion=''
            this.ownxuekuClassProportion=''
            this.ownketangClassProportion=''
            this.findPage(null)
          }else{
            this.$message({ message: res.msg, type: "error" });
            this.ProportioningdialogVisible=false
          }
           
      })
    },
    // 添加分中心
    addbrCustomer(){
       this.$api.user.addbrCustomer({branchCenterCode:this.branchCenterCode}).then(res => { 
        if(res.result==1){
          this.$message({message:res.msg,type:'success'})
          this.dialogVisible = false;
          this.operation = false;
          this.findPage(null)
        }else if(res.result==2){
            this.$message({message:res.msg,type:'error'})
        }
      })
    },
    // 分中心远程搜索
    querySearchAsync(queryString, callback) {
      let restaurants = [{}];
      let results=''
      this.$api.dropdown.branchcenter().then(res => {
        for(let i of res.branchCenterInfoList){
              i.value = i.name;  //将想要展示的数据作为value
          }
        restaurants =res.branchCenterInfoList;
       results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        callback(results);
      })
    },
    createFilter(queryString) {
      return (restaurant) => {
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    handleSelect(item) {
      this.queryBox.name=item.name
    },
     // 大区经理远程搜索
    querySearchAsync2(queryString, callback) {
      let restaurants = [{}];
      let results=''
      this.$api.student.querySignRep().then(res => {
        let signRepListJson=[]
        for (let i = 0; i < res.signRepList.length; i++) {
            let j={}
            j.name=res.signRepList[i]
            signRepListJson.push(j)
        }
        for(let i of signRepListJson){
              i.value = i.name;  //将想要展示的数据作为value
          }
        restaurants =signRepListJson;
        results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants;
        callback(results);
      })
    },
    createFilter2(queryString) {
      return (restaurant) => {
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    handleSelect2(item) {
      this.queryBox.signRep=item.name
    },
  },
  mounted() {
    
  }
};
</script>
<style lang='scss' scoped>
@import url("../../assets/queryBox.css");
.ProportioningBox{
  display: flex;
  .Proportioning-title{
    float: left;
    border-radius: 4px;
    line-height: 37px;
    margin-right: 2%;
  }
  .Proportioning-title2{
    margin-right: 6%;
  }
}
.el-row .el-col{
  margin-left: 0;
}

</style>
<style scoped>
.add-btns .el-button:nth-child(1) {
  margin-right: 10px;
}
</style>


